<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--用户数据-->
      <el-col :xs="24">
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
          <el-form-item prop="phonenumber">
            <el-input v-model="queryParams.phoneNumber" placeholder="请输入手机号" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item prop="userName">
            <el-input v-model="queryParams.custName" placeholder="请输入客户名称" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item prop="userName">
            <el-input v-model="queryParams.custType" placeholder="请输入客户类型" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item style="width: 300px">
            <el-date-picker v-model="dateRange" type="date" value-format="YYYY-MM-DD" placeholder="请选择时间" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="getLists">搜索</el-button>
             <el-button icon="Refresh" @click="mapClick">地图</el-button>
             <!--<el-button icon="Refresh" @click="resetQuery">重置</el-button>
            <el-button icon="primary" @click="expertQuery">高级查询</el-button> -->
          </el-form-item>
        </el-form>

        
        <div>
        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange" v-if="isMap == false">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="名称" align="center" key="custName" prop="custName" :show-overflow-tooltip="true" />
          <el-table-column label="客户类型" align="center" key="nickName" prop="custType" :show-overflow-tooltip="true" />
          <el-table-column label="证件类型" align="center" key="grade" prop="certType" :show-overflow-tooltip="true" />
          <el-table-column label="手机号码" align="center" key="grade" prop="phoneNumber" :show-overflow-tooltip="true" />
          <el-table-column label="操作" fixed="right" align="center" width="150" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-tooltip content="查看" placement="top">
                <el-button link type="primary" icon="View" @click="handleView(scope.row)" v-hasPermi="['system:user:edit']"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        
        <pagination v-show="total > 0" :total="total" :page_sizes="page_sizes" v-model:page="queryParams.page_count" v-model:limit="queryParams.page_size" @pagination="getList" />
        </div>
        <!-- <div>
          <div style="width:1700px;height: 560px !important;">
          <div class="txmap">地图</div>
        </div>
        </div> -->
        
        </el-col>
    </el-row>
  </div>
</template>

<script setup name="Access">
import { onMounted, reactive, ref , watch } from 'vue'
import { getToken } from "@/utils/auth";
import { getFirmList, getPerList } from "@/api/guarantee";
const router = useRouter();
const { proxy } = getCurrentInstance();
const expertShow = ref(false);
const userSource = ref([
  { value: "0", label: "PC端" },
  { value: "1", label: "移动端" },
  { value: "2", label: "WX端" },
]);
const classArr = ref([
  { value: "0", label: "注册会员" },
  { value: "1", label: "普通会员" },
  { value: "2", label: "黄金会员" },
  { value: "3", label: "白金会员" },
  { value: "4", label: "钻石会员" },
  { value: "5", label: "PLUS会员" },
]);
const tagArr = ref([]); //接口获取
const userList = ref([]);

const isMap = ref(false);
const open = ref(false);
const openMessage = ref(false);
const loading = ref(false);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(6);
const title = ref("");
const dateRange = ref("");
const deptName = ref("");
const deptOptions = ref(undefined);
const initPassword = ref(undefined);
const postOptions = ref([]);
const roleOptions = ref([]);
const page_sizes = ref([10, 20, 50, 100, 200]);
/*** 用户导入参数 */
const upload = reactive({
  // 是否显示弹出层（用户导入）
  open: false,
  // 弹出层标题（用户导入）
  title: "",
  // 是否禁用上传
  isUploading: false,
  // 是否更新已经存在的用户数据
  updateSupport: 0,
  // 设置上传的请求头部
  headers: { Authorization: "Bearer " + getToken() },
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + "/system/user/importData",
});
// 列显隐信息
const columns = ref([
  { key: 0, label: `用户ID`, visible: true },
  { key: 1, label: `用户手机号`, visible: true },
  { key: 2, label: `用户姓名`, visible: true },
  { key: 3, label: `会员等级`, visible: true },
  { key: 4, label: `担保金额`, visible: true },
  { key: 5, label: `担保笔数`, visible: true },
  { key: 6, label: `剩余贷还`, visible: true },
  { key: 7, label: `账户启用状态`, visible: true },
]);

const data = reactive({
  form: {},
  formMessage: {},
  queryParams: {
    page_count: 1,
    page_size: 10,
    userName: undefined,
    phonenumber: undefined,
    status: undefined,
    deptId: undefined,
    contarn: undefined,
  },
  rules: {
    total: [
      { required: true, message: "站内信标题不能为空", trigger: "blur" },
      { min: 1, max: 10, message: "", trigger: "blur" },
    ],
    titleMsg: [
      { required: true, message: "站内信标题不能为空", trigger: "blur" },
      { min: 2, max: 20, message: "标题长度必须介于 2 和 20 之间", trigger: "blur" },
    ],
    contentMsg: [
      { required: true, message: "站内信内容不能为空", trigger: "blur" },
      { min: 2, max: 100, message: "内容长度必须介于 2 和 100 之间", trigger: "blur" },
    ],
  },
});

const { formMessage, queryParams, form, rules } = toRefs(data);

function getLists() {
  loading.value = true;
  // const params = { pageSize: queryParams.value.page_size, pageNum: queryParams.value.page_count };

  getPerList(queryParams.value).then((res) => {
    console.log(res, "6666");
    if (res.code == "200") {
      loading.value = false;
      userList.value = res.data.list;
      console.log(userList.value, "222222");
    }
  });

}
function init() {
  // 创建单个标注
  var myLatlng = new qq.maps.LatLng(31.239585,121.323628);
  var myOptions = {
    zoom: 11,
    center: myLatlng,
    mapTypeId: qq.maps.MapTypeId.ROADMAP
  }
  var map = new qq.maps.Map(document.querySelector(".txmap"), myOptions);
  // var anchor = new qq.maps.Point(6, 6),
  //     size = new qq.maps.Size(24, 24),
  //     origin = new qq.maps.Point(0, 0),
  //     icon = new qq.maps.MarkerImage('https://mapapi.qq.com/web/lbs/javascriptV2/demo/img/center.gif', size, origin, anchor);
  // var marker = new qq.maps.Marker({
  //     icon: icon,
  //     position: myLatlng,
  //     map: map
  // });


  // 创建多个标注
  // 定义标注点数组  
  var anchor = new qq.maps.Point(6, 6),
      size = new qq.maps.Size(24, 24),
      origin = new qq.maps.Point(0, 0),
      icon = new qq.maps.MarkerImage('https://mapapi.qq.com/web/lbs/javascriptV2/demo/img/center.gif', size, origin, anchor);
  var markers = [  
    { title: '嘉定区，张三', position: new qq.maps.LatLng(31.239585,121.323628) },  
    { title: '嘉定区，李四', position: new qq.maps.LatLng(31.216066,121.442969) },  
    { title: '嘉定区，王五', position: new qq.maps.LatLng(31.29067,121.30828) } , 
    { title: '嘉定区，张明', position: new qq.maps.LatLng(31.139479,121.408605) },  
    { title: '浦东新区，小花', position: new qq.maps.LatLng(31.054467,121.721398) }  
  ];  
  
  // 循环遍历标注点数组，创建并添加标注点到地图上  
  for (var i = 0; i < markers.length; i++) {  
    var marker = new qq.maps.Marker({  
      icon: icon,
      map: map,  
      position: markers[i].position,
      title: markers[i].title,  
      label: {  
        content: markers[i].title, // 设置标注点旁边的文本内容  
        color: '#FFFFFF', // 设置文本颜色  
        fontSize: '24px', // 设置文本字体大小  
        anchor: new qq.maps.Point(0, -20), // 设置文本相对于标注点的偏移位置  
      }    
    });  
  }  
}

/** 群发短信  */
function handleCommandMass(val) {
  if (val == "a") {
    if (ids.value.length > 0) {
      proxy.$modal.msgSuccess("选中群发短信成功");
    } else {
      proxy.$modal.msgWarning("请至少选中一条数据");
    }
  } else {
    proxy.$modal.msgSuccess("全部群发短信成功");
  }
}
/** 重置操作表单 */
function resetMessage() {
  formMessage.value = {
    total: undefined,
    titleMsg: undefined,
    contentMsg: undefined,
  };
  proxy.resetForm("messageRef");
}
/** 群发站内信  */
function handleMessage(val) {
  resetMessage();
  if (val == "a") {
    if (ids.value.length > 0) {
      formMessage.value.total = ids.value.length;
      openMessage.value = true;
    } else {
      proxy.$modal.msgWarning("请至少选中一条数据");
    }
  } else {
    formMessage.value.total = "6";
    openMessage.value = true;
  }
}
/** 提交站内信内容*/
function messageSumbit() {
  proxy.$refs["messageRef"].validate((valid) => {
    if (valid) {
      openMessage.value = false;
      proxy.$modal.msgSuccess("成功");
    }
  });
}
/** 导出 */
function handleCommandExport(val) {
  if (val == "a") {
    if (ids.value.length > 0) {
      proxy.$modal.msgSuccess("选中导出数据成功");
    } else {
      proxy.$modal.msgWarning("请至少选中一条数据");
    }
  } else {
    proxy.$modal.msgSuccess("全部导出数据成功");
  }
}
/** 排序 */
function handleSort(val) {
  getList();
}
/** 通过条件过滤节点  */
const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};
/** 根据名称筛选部门树 */
watch(deptName, (val) => {
  proxy.$refs["deptTreeRef"].filter(val);
});
/** 查询部门下拉树结构 */
function getDeptTree() {
  deptTreeSelect().then((response) => {
    deptOptions.value = response.data;
  });
}
/** 高级查询*/
function expertQuery() {
  expertShow.value = true;
}
/** 查询用户列表 */
function getList() {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 600);
  return;
}
/** 节点单击事件 */
function handleNodeClick(data) {
  queryParams.value.deptId = data.id;
  handleQuery();
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.page_count = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  queryParams.value.deptId = undefined;
  proxy.$refs.deptTreeRef.setCurrentKey(null);
  handleQuery();
}
/** 地图按钮操作 */
function mapClick() {
  // if(isMap.value == true){
  //   isMap.value = false
  // }else{
  //   isMap.value = true
  // }
  router.push({ path: "/customer-record/map", query: {map: "1"} });
  
}
/** 删除按钮操作 */
function handleDelete(row) {
  const userIds = row.userId || ids.value;
  proxy.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {
    //  return delUser(userIds);
    userList.value = userList.value.filter((item) => {
      return item.userId != row.userId;
    });
    total.value = userList.value.length;
    getList();
    proxy.$modal.msgSuccess("删除成功");
  });

  //  .then(() => {
  //    getList();
  //    proxy.$modal.msgSuccess("删除成功");
  //  }).catch(() => {});
}
/**查看*/
function handleView(row) {
  router.push({ name: "Infos", query: { id: row.id, type: row.type, customId: row.customId } });
  // if (row.type == "2") {
  //   router.push({ path: "personal", query: { id: row.id } });
  // } else {
  //   router.push({ path: "public-corporate", query: { id: row.id } });
  // }
}
/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    "system/user/export",
    {
      ...queryParams.value,
    },
    `user_${new Date().getTime()}.xlsx`
  );
}
/** 用户状态修改  */
function handleStatusChange(row) {
  let text = row.status === "0" ? "启用" : "停用";
  //  proxy.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?').then(function () {
  //    return changeUserStatus(row.userId, row.status);
  //  }).then(() => {
  //    proxy.$modal.msgSuccess(text + "成功");
  //  }).catch(function () {
  row.status = row.status === "0" ? "1" : "0";
  //  });
}
/** 更多操作 */
function handleCommand(command, row) {
  switch (command) {
    case "handleResetPwd":
      handleResetPwd(row);
      break;
    case "handleAuthRole":
      handleAuthRole(row);
      break;
    default:
      break;
  }
}
/** 跳转角色分配 */
function handleAuthRole(row) {
  const userId = row.userId;
  router.push("/system/user-auth/role/" + userId);
}
/** 重置密码按钮操作 */
function handleResetPwd(row) {
  proxy
    .$prompt('请输入"' + row.userName + '"的新密码', "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      closeOnClickModal: false,
      inputPattern: /^.{5,20}$/,
      inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
    })
    .then(({ value }) => {
      resetUserPwd(row.userId, value).then((response) => {
        proxy.$modal.msgSuccess("修改成功，新密码是：" + value);
      });
    })
    .catch(() => {});
}
/** 选择条数  */
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.userId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}
/** 导入按钮操作 */
function handleImport() {
  upload.title = "用户导入";
  upload.open = true;
}
/** 下载模板操作 */
function importTemplate() {
  proxy.download("system/user/importTemplate", {}, `user_template_${new Date().getTime()}.xlsx`);
}
/**文件上传中处理 */
const handleFileUploadProgress = (event, file, fileList) => {
  upload.isUploading = true;
};
/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {
  upload.open = false;
  upload.isUploading = false;
  proxy.$refs["uploadRef"].handleRemove(file);
  proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
  getList();
};
/** 提交上传文件 */
function submitFileForm() {
  proxy.$refs["uploadRef"].submit();
}
/** 重置操作表单 */
function reset() {
  form.value = {
    nickName: undefined,
    deptId: undefined,
    userName: undefined,
    member: undefined,
    userTag: undefined,
    timer: undefined,
  };
  proxy.resetForm("searchRef");
}
/** 高级搜索重置按钮 */
function cancel() {
  reset();
}
/** 提交按钮 */
function submitForm() {
  getList();
  expertShow.value = false;
}

/*信息维护 */
function handleEdit(row) {
  if (row.type == "2") {
    router.push({ path: "personal", query: { id: row.id } });
  } else {
    router.push({ path: "public-corporate", query: { id: row.customId } });
  }
}

getLists();
// getList();

onMounted(()=>{
  init();
 })
</script>
<style scoped>
.explain {
  line-height: 40px;
  font-size: 12px;
  margin-left: 90px;
}
.message-hint {
  margin-left: 130px;
  line-height: 32px;
  font-size: 12px;
}
.txmap {
  /*地图(容器)显示大小*/
  width: 100%;
  height: 100%;
}
</style>
